<template>
  <div class="index">
    <section class="header">
      <my-img
        :src="userInfo.avatar || 'default_head.png'"
        @tap="
          NavigateTo({
            url: '/pages_user/user_info/user_info'
          })
        "
        alt=""
        class="avatar"
        mode="aspectFill"
      />

      <footer>
        <text class="name">
          {{ userInfo.nick_name || userInfo.phone }}
        </text>
        <div class="gold" @tap="NavigateTo({ url: '/pages_user/about-bean/about-bean' })">
          <my-img alt="" class="bean" src="ico_beans@2x.png"/>
          <text>{{ userInfo.venosa }}</text>
        </div>
      </footer>
    </section>

    <div class="scroll"></div>

    <scroll-view class="course" scroll-with-animation scroll-y>
      <ul class="course-list" v-if="todayCourse.list.length">
        <li
          :key="i"
          class="courser-item"
          v-for="(course, i) in todayCourse.list"
        >
          <header
            style="background-repeat: no-repeat"
            :style="{ backgroundImage: `url(${course.today_cover})` }"
          >
            <div class="titles">
              <h1>{{ course.name }}</h1>
              <h2>{{ course.class_schedule }}</h2>
            </div>
          </header>

          <footer v-if="course.is_audition === 1 && course.is_claim === 1">
            <section class="try">
              您还没有报名噢~
            </section>
            <my-button
              @tap="
                NavigateTo({ url: '/pages_course/free_course/free_course' })
              "
            >免费领取试听课
            </my-button>
          </footer>

          <footer v-else>
            <my-button
              @tap="
                NavigateTo({
                  url: '/pages_course/course_list/course_list',
                  query: { id: course.id }
                })
              "
            >马上学习
            </my-button>
          </footer>
        </li>
      </ul>
      <div v-else>
        <my-img src="sanzhidouya.png" class-name="more-class-img"/>
        <div class="more-class" @click="navigateToMiniProgram">更多课程</div>
      </div>
    </scroll-view>

    <loading/>

    <TabBar :cur="0" class="tab-bar-position"/>
    <white-space :height="60"/>
  </div>
</template>

<script>
  import TabBar from "../../component/tab-bar/tab-bar";
  import MyButton from "../../component/my-button/my-button";
  import { NavigateTo } from "../../utils/router";

  import { mapActions, mapState } from "vuex";

  export default {
    components: {
      TabBar,
      MyButton
    },
    data() {
      return {
        imageUrl: this.$imageUrl
      };
    },
    computed: {
      ...mapState("User", ["userInfo"]),
      ...mapState("Course", ["todayCourse"])
    },
    onShow() {
      this.reqCourseList({ type: 1 });
      this.reqUserInfo();
    },
    methods: {
      ...mapActions("User", ["reqUserInfo"]),
      ...mapActions("Course", ["reqCourseList"]),
      NavigateTo,
      navigateToMiniProgram() {
        // #ifdef  APP-PLUS
        this.NavigateTo({
          url: "/pages/web-view/web-view"
        });
        // #endif
        // #ifdef  MP-WEIXIN
        uni.navigateToMiniProgram({
          appId: "wx2aee0a729f3bd390",
          // path: 'pages/index/index?id=123',
          // extraData: {
          //   'data1': 'test'
          // },
          success(res) {
            // 打开成功
          }
        });
        // #endif
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import "../../uni";

  .index {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    @include bg;

    section.header {
      position: fixed;
      top: 0;
      display: flex;
      width: 100vw;
      height: upx(420);
      box-sizing: border-box;
      background: {
        image: url($imgUrl + "/img/bg_home@2x.png");
        size: 100% upx(420);
      }
      padding: upx(100) upx(40);

      footer {
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        flex-direction: column;
        height: upx(62 * 2);
        margin-left: upx(20);
      }

      .avatar {
        height: upx(116);
        width: upx(116);
        border-radius: 50%;
        border: upx(4) solid #80eada;
        overflow: hidden;
      }

      text.name {
        @include ft(32, #fff, 500);
      }

      .gold {
        display: flex;
        align-items: center;

        min-width: upx(100);
        padding: 0 upx(14);
        height: upx(52);
        background: #fff;
        border-radius: upx(26) upx(26) upx(26) upx(26);

        .bean {
          width: upx(48);
          height: upx(48);
        }

        text {
          @include ft(32, $theme-yellow, 500);
          margin-left: upx(10);
        }
      }
    }

    div.scroll {
      position: absolute;
      top: upx(350);
      background: red;
      width: 100vw;
      height: upx(400);
      border-radius: upx(40);
      background: $bg-color;
    }

    .course {
      position: relative;
      z-index: 9;
      height: calc(100vh - 400px);
      margin: upx(250) auto 0;

      .course-list {
        width: upx(590);
        margin: auto;
        border-radius: upx(32);
        overflow: hidden;

        .courser-item {
          background: #fff;
          box-shadow: 0 upx(4) upx(36) 0 rgba(122, 137, 130, 0.14);
          border-radius: upx(32);
          margin-bottom: upx(40);
          overflow: hidden;

          header {
            width: 100%;
            background-size: 101%;
            height: upx(420);
            text-align: center;

            .titles {
              padding: upx(280) 0 upx(8) 0;
            }

            h1 {
              padding: upx(10) 0 0;
              letter-spacing: 0.05em;
              @include ft(44, #fff, 500);
              background: rgba(0, 0, 0, 0.3);
            }

            h2 {
              padding: upx(10) 0;
              @include ft(32, #fff, 500);
              letter-spacing: 0.03em;
              background: rgba(0, 0, 0, 0.3);
            }
          }

          .try {
            @include ft(32);
            text-align: center;
            margin: 0 0 upx(20) 0;
          }

          footer {
            padding: 0 0 upx(40) 0;
            margin-top: upx(40);
          }
        }
      }
    }

    .more-class {
      width: upx(380);
      height: upx(72);
      border-radius: upx(40);
      border: upx(4) solid rgba(255, 204, 24, 1);
      background: rgba(245, 251, 252, 1);
      font-size: upx(36);
      font-weight: 500;
      color: rgba(255, 204, 24, 1);
      line-height: upx(72);
      text-align: center;
      margin: upx(48) auto;
    }
  }
</style>
